<template>
	<div class="banner-manage">
		<div class="banner-manage-title">
			<div class="title-left">BANNER管理</div>
			<div class="titke-introduce">注：最多支持五个banner轮播</div>
		</div>
		<div class="change-btn">
			<div>
				<el-select class='building-select' @change='handleChangeBuild' v-model="build" placeholder="建筑物">
				    <el-option
				      v-for="item in building"
				      :key="item.buildIdStr"
				      :label="item.buildName"
				      :value="item.buildIdStr">
				    </el-option>
				 </el-select>
			</div>
			<div>
				<el-button class='add-btn' type="primary" @click='handleAddBanner'>添加</el-button>
			</div>
		</div>
		<div class="notes">
			<el-table
			    ref="multipleTable"
			    :data="bannerlist"
			    border
			    tooltip-effect="dark"
			    style="width: 100%">
			    <el-table-column
			      label="序号"
			     >
			      <template scope="scope">{{ scope.$index+1 }}</template>
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="名称"
			      >
			      <template scope="scope">{{ scope.row.bannerName }}</template>
			    </el-table-column>
			    <el-table-column
			      prop="sort"
			      label="排序"
			       width='110'
			      >
			      <template scope="scope">
			     <span
		          class="small-btn"
		          @click="handleUpBanner(scope.$index, scope.row)">上移</span>
		          <span
		          class="small-btn"
		          @click="handleDownBanner(scope.$index, scope.row)">下移</span>
		      </template>
			    </el-table-column>
			    <el-table-column
			      prop="state"
			      label="状态"
			     >
			       <template scope="scope">{{ scope.row.status==0?'未上线':'已上线' }}</template>
			    </el-table-column>
			   
			    <el-table-column
			      prop="address"
			      label="banner预览"
			      width="170">
			      <template scope="scope">
			      	<img width="80" height="60" style='padding:5px 20px;' :src="scope.row.bannerImage" alt="">
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="address"
			      label="跳转地址"
			      width="120">
			      <template scope="scope">
			      	{{scope.row.path}}
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="address"
			      width='300'
			      label="操作">
				      <template scope="scope">
				        <el-button
				          size="small"
				          type="primary"
				          class='edit-banner'
				          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				        <el-button
				          size="small"
				          type="danger"
				          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				          <el-button
				          size="small"
				          v-if='scope.row.status==0?yBtn:nBtn'
				          @click="bannerOnline(scope.$index, scope.row)">上线</el-button>
				          <el-button
				          size="small"
				          v-if='scope.row.status==1?yBtn:nBtn'
				          @click="bannerUpline(scope.$index, scope.row)">下线</el-button>
				      </template>
			    </el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script>
	export default {
		data (){
			return {
				building:[],
				build:'',
				yBtn:true,
				nBtn:false,
				buildId:null,
				bannerlist:null,
			}
		},
		methods:{
			toggleSelection(rows) {
		        if (rows) {
		          rows.forEach(row => {
		            this.$refs.multipleTable.toggleRowSelection(row);
		          });
		        } else {
		          this.$refs.multipleTable.clearSelection();
		        }
		      },

		   	 handleAddBanner(){
		   	 	if(this.bannerlist.length<5){
		   	 		this.$router.push('banner_add')
		   	 	}else{
		   	 		this.$message.error('banner不可以超过五张')
		   	 	}
		   	 },

		      handleChangeBuild(val){
		      	this.buildId = val
		      	this.getBannerData()
		      },

		     getBannerData(){
		     	let self = this;
		     	self.$http.post('marketweb/actionbanner/queryBanners',{
		     		keyAdmin:self.$store.state.keyAdmin,
		     		buildId:self.buildId
		     	}).then(response=>{
		     		if(response.body.code == 200){
		     			self.bannerlist = response.body.bannerlist
		     		}else{
		     			self.$message.error(response.body.msg)
		     		}
		     		
		     	},response=>{
		     		self.$message.error('banner列表加载失败')
		     	})
		      },

		     getBuildingData(){
		     	let self = this
		     	self.$http.post('marketweb/build/querybuilds',{
		     		keyAdmin:self.$store.state.keyAdmin
		     	}).then(response=>{
		     		if(response.body.code == 200){
		     			self.building = response.body.buildList
		     			self.buildId = self.building[0].buildIdStr
		     			self.build = self.building[0].buildIdStr
		     			self.getBannerData()
		     		}else{
		     			self.$message.error('获取建筑物信息失败')
		     		}
		     		
		     	},response=>{
		     		self.$message.error('建筑物请求失败')
		     	})
		     },

		     bannerOnline(index,row){
		     	let self = this
		    	this.$confirm('确定要上线该banner?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'Info'
		        }).then(() => {
			    		this.$http.post('marketweb/actionbanner/statusBanner',{
			    		keyAdmin:this.$store.state.keyAdmin,
			    		bannerId: row.id,
			    		status:1
					    }).then(response=>{
				    		if(response.body.code == 200){
				    			this.$message({
				    				message:'上线成功',
				    				type:'success'
				    			})
				    			self.getBannerData()
				    		}else{
				    			this.$message.error(response.body.msg)
				    		}
				    	},response=>{
				    		this.$message.error('请求失败')
				    	})

	        }).catch(() => {
	          this.$message({
	            type: 'info',
	            message: '已取消上移操作'
	          });          
        });
		     },

		     bannerUpline(index,row){
		     	let self = this
		    	this.$confirm('确定要下线该banner?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'Info'
		        }).then(() => {
			    		this.$http.post('marketweb/actionbanner/statusBanner',{
			    		keyAdmin:this.$store.state.keyAdmin,
			    		bannerId: row.id,
			    		status:0
					    }).then(response=>{
				    		if(response.body.code == 200){
				    			this.$message({
				    				message:'下线成功',
				    				type:'success'
				    			})
				    			self.getBannerData()
				    		}else{
				    			this.$message.error(response.body.msg)
				    		}
				    	},response=>{
				    		this.$message.error('请求失败')
				    	})

	        }).catch(() => {
	          this.$message({
	            type: 'info',
	            message: '已取消上移操作'
	          });          
        });
		     },

		    handleEdit(index, row) {
		    	this.$router.push('banner_mod/'+row.id)
		    },

		    handleDelete(index, row) {
		    	this.$confirm('确定要删除该文件吗?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'info'
		        }).then(() => {
		        	this.$http.post('marketweb/actionbanner/deleteBanner',{
		        	keyAdmin:this.$store.state.keyAdmin,
		        	bannerId:row.id
		        }).then(response=>{
		        	if(response.body.code == 200){
		        		this.bannerlist.splice(index,1)
		        		this.$message({
				            type: 'success',
				            message: '删除成功!'
				          });
		        	}else{
		        		this.$message.error(response.body.msg)
		        	}
		        },response=>{
		        	this.$message.error('请求数据失败')
		        })
		          
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
		        
		    },

		    handleUpBanner(index, row){
		    	let self = this
		    	this.$confirm('确定要上移该banner?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'Info'
		        }).then(() => {
	          	if (index > 0) {
			    		this.$http.post('marketweb/actionbanner/snBanner',{
			    		keyAdmin:this.$store.state.keyAdmin,
			    		up_id: row.id,
			    		down_id :this.bannerlist[index-1].id
					    }).then(response=>{
				    		if(response.body.code == 200){
				    			this.$message({
				    				message:'上移成功',
				    				type:'success'
				    			})
				    			self.getBannerData()
				    		}else{
				    			this.$message.error(response.body.msg)
				    		}
				    	},response=>{
				    		this.$message.error('请求失败')
				    	})
			    	}else{
			    		this.$message.error('已经是第一张')
			    	}
	        }).catch(() => {
	          this.$message({
	            type: 'info',
	            message: '已取消上移操作'
	          });          
        });
			    
		    	
		    },

		    handleDownBanner(index, row){
		    	let self = this
		    	this.$confirm('确定要下移该banner?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'info'
		        }).then(() => {
		          if(index < this.bannerlist.length-1){
				    		this.$http.post('marketweb/actionbanner/snBanner',{
				    		keyAdmin:this.$store.state.keyAdmin,
				    		up_id: this.bannerlist[index+1].id,
				    		down_id :row.id
					    	}).then(response=>{
					    		if(response.body.code == 200){
					    			this.$message({
					    				message:'下移成功',
					    				type:'success'
					    			})
					    			self.getBannerData()
					    		}else{
					    			this.$message.error(response.body.msg)
					    		}
					    	},response=>{
					    		this.$message.error('请求失败')
					    	})
				    	}else{
				    		this.$message.error('已经是最后一张')
				    	}
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
          	});          
        });
		    	
		    	
		    }
		},
		created(){
			this.getBuildingData()
		}
	}
</script>

<style scoped>
	.banner-manage-title{
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		border-bottom:2px solid #169bd5;
		padding-bottom:15px;
	}
	.title-left{
		font-size: 18px;
		color: #4fabe7;
	}
	.add-btn{
		padding: 8px 10px;
		margin-top: 8px;
	}
	.edit-banner{
		color:#fff;
	}
	.building-select{
		margin: 5px 0;
	}
	.titke-introduce{
		font-size: 10px;
		color: #ff4949;
	}
	.small-btn{
		cursor: pointer;
	}
	.small-btn:hover{
		text-decoration: underline;
	}
	.el-form-item{
    margin-bottom: 5px;
  }
	.change-btn{
		display: flex;
		justify-content: space-between;
		background:#eee;
		margin-top:10px;
		padding: 0 10px;
	}
	.notes{
		margin-top: 20px;
	}
</style>